<template>
    <div class="Seting-all">
        <PublicHader></PublicHader>
        <el-row>
<!--            第一部分-->
            <el-col :span="7">
                <div class="grid-content-one">
                    <div class="one-main">
                        <div class="one-main-list">
                            <div class="one-main-item">
                                <ul>
                                    <li
                                            @click="clickCategory(1), (cur = 1)"
                                            :class="{ active: categoryIndex == 1 }"
                                    >
                                        <i class="el-icon-s-custom"></i>&nbsp; 账号与密码
                                    </li>
                                </ul>
                            </div>
                            <div class="one-main-item">
                                <ul>
                                    <li
                                            @click="clickCategory(2), (cur = 2)"
                                            :class="{ active: categoryIndex == 2 }"
                                    >
                                        <i class="el-icon-message-solid"></i>&nbsp; 消息与邮件
                                    </li>
                                </ul>
                            </div>
                            <div class="one-main-item">
                                <ul>
                                    <li
                                            @click="clickCategory(2), (cur = 3)"
                                            :class="{ active: categoryIndex == 2 }"
                                    >
                                        <i class="el-icon-remove"></i>&nbsp; 屏蔽
                                    </li>
                                </ul>
                            </div>
                            <div class="one-main-item">
                                <ul>
                                    <li
                                            @click="clickCategory(2), (cur = 4)"
                                            :class="{ active: categoryIndex == 2 }"
                                    >
                                        <i class="el-icon-lock"></i>&nbsp; 隐私
                                    </li>
                                </ul>
                            </div>
                            <div class="one-main-item">
                                <ul>
                                    <li
                                            @click="clickCategory(2), (cur = 5)"
                                            :class="{ active: categoryIndex == 2 }"
                                    >
                                        <i class="el-icon-s-tools"></i>&nbsp; 偏好设置
                                    </li>
                                </ul>
                            </div>
                            <div class="one-main-item">
                                <ul>
                                    <li
                                            @click="clickCategory(2), (cur = 6)"
                                            :class="{ active: categoryIndex == 2 }"
                                    >
                                        <i class="el-icon-s-goods"></i>&nbsp; 好物推荐
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
<!--            第二部分-->
            <el-col :span="9">
                <div class="bg-purple-two">
                    <div class="two-main">
                        <div v-show="cur == 1" class="two-main-list">
                            <div class="two-main-item">
                                <h2>账号与密码</h2>
                                <div>账号设置/个性域名</div>
                            </div>
                            <div class="two-main-item">
                                <h3>账号设置</h3>
                                <div>绑定手机和邮箱，并设置密码，帐号更安全</div>
                                <div>注意：为保证帐号安全，需进行二次验证。</div>
                            </div>
                            <div class="two-main-item">
                                <h1>密码</h1>
                                <div>
                                    未设置
                                    <el-button type="text" class="but" @click="handlemake1">编辑</el-button>
                                </div>
<!--                                密码的编辑按钮-->
                                <el-dialog style="width: 800px;margin-left: 23%;" class="title" :visible.sync="dialogFormVisible1">
                                    <div>
                                        <h2>身份验证</h2>
                                        <h1>为了保护你的帐号安全，请验证身份，</h1>
                                        <h1>验证成功后进行下一步操作</h1>
                                    </div>
                                    <el-input
                                            placeholder="使用手机 +86 110进行验证"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <el-input
                                            placeholder="输入6位短信验证码"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <div>
                                        接收语音验证码
                                    </div>
                                    <h3>
                                        需要帮助？
                                    </h3>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                        <el-button type="primary">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div class="two-main-item">
                                <h1>绑定手机</h1>
                                <div>
                                    +86110
                                    <el-button type="text" class="but-one" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                            <div class="two-main-item">
                                <h1>绑定邮箱</h1>
                                <div>
                                    未绑定
                                    <el-button type="text" class="but" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                            <div class="two-main-item">
                                <h1>绑定第三方账号</h1>
                            </div>
                            <div class="two-main-item">
                                <h1>个性域名</h1>
                                <div>个人主页的地址，个性域名只可更改一次</div>
                                <div>www.baidu.com</div>
                                <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                            </div>
                        </div>
                        <div v-show="cur == 2" class="two-main-list">
                            <div class="two-main-item">
                                <h2>消息与邮件</h2>
                                <div>私信设置/邀请设置/赞同与赞赏/关注/邮件设置</div>
                            </div>
                            <div class="two-main-item">
                                <h3>私信设置</h3>
                                <div>
                                    允许谁给我发私信
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                                <!--                                密码的编辑按钮-->
                                <el-dialog style="width: 800px;margin-left: 23%;" class="title" :visible.sync="dialogFormVisible">
                                    <div>
                                        <h2>身份验证</h2>
                                        <h1>为了保护你的帐号安全，请验证身份，</h1>
                                        <h1>验证成功后进行下一步操作</h1>
                                    </div>
                                    <el-input
                                            placeholder="使用手机 +86 110进行验证"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <el-input
                                            placeholder="输入6位短信验证码"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <div>
                                        接收语音验证码
                                    </div>
                                    <h3>
                                        需要帮助？
                                    </h3>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div class="two-main-item">
                                <h3>邀请/评论消息设置</h3>
                                <div>
                                    有人对我发出邀请时，我会收到消息通知
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                            <div class="two-main-item">
                                <h3>赞同/赞赏消息设置</h3>
                                <div>
                                    有人对我赞同或赞赏时，我会收到消息通知
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                            <div class="two-main-item">
                                <h3>关注消息设置</h3>
                                <div>
                                    我的关注有新动态时，我会收到消息通知
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                            <div class="two-main-item">
                                <h3>邮件设置</h3>
                                <div>
                                    重要事件发生时，我将会收到邮件提醒
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                        </div>
                        <div v-show="cur == 3" class="two-main-list">
                            <div class="two-main-item">
                                <h2>屏蔽</h2>
                                <div>用户黑名单/话题黑名单/不看他的动态</div>
                            </div>
                            <div class="two-main-item">
                                <h3>用户黑名单</h3>
                                <div>
                                    查看或撤销已屏蔽用户
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                                <!--                                密码的编辑按钮-->
                                <el-dialog style="width: 800px;margin-left: 23%;" class="title" :visible.sync="dialogFormVisible">
                                    <div>
                                        <h2>身份验证</h2>
                                        <h1>为了保护你的帐号安全，请验证身份，</h1>
                                        <h1>验证成功后进行下一步操作</h1>
                                    </div>
                                    <el-input
                                            placeholder="使用手机 +86 110进行验证"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <el-input
                                            placeholder="输入6位短信验证码"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <div>
                                        接收语音验证码
                                    </div>
                                    <h3>
                                        需要帮助？
                                    </h3>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div class="two-main-item">
                                <h3>瓦力黑名单</h3>
                                <div>
                                    查看或撤销已屏蔽用户
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                            <div class="two-main-item">
                                <h3>话题黑名单</h3>
                                <div>
                                    查看或撤销已屏蔽话题
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                            <div class="two-main-item">
                                <h3>不看他的动态</h3>
                                <div>
                                    屏蔽已关注用户的动态
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                            </div>
                        </div>
                        <div v-show="cur == 4" class="two-main-list">
                            <div class="two-main-item">
                                <h2>隐私</h2>
                                <div>隐私保护</div>
                            </div>
                            <div class="two-main-item">
                                <h3>隐私保护</h3>
                                <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                            </div>
                            <!--                                密码的编辑按钮-->
                            <el-dialog style="width: 800px;margin-left: 23%;" class="title" :visible.sync="dialogFormVisible">
                                <div>
                                    <h2>身份验证</h2>
                                    <h1>为了保护你的帐号安全，请验证身份，</h1>
                                    <h1>验证成功后进行下一步操作</h1>
                                </div>
                                <el-input
                                        placeholder="使用手机 +86 110进行验证"
                                        v-model="fake"
                                >
                                </el-input>
                                <el-input
                                        placeholder="输入6位短信验证码"
                                        v-model="fake"
                                >
                                </el-input>
                                <div>
                                    接收语音验证码
                                </div>
                                <h3>
                                    需要帮助？
                                </h3>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary">确 定</el-button>
                                </div>
                            </el-dialog>
                            <div class="two-main-item">
                                <div>在站外隐藏个人信息</div>
                                <el-switch
                                        class="anniu"
                                        v-model="value1"
                                       >
                                </el-switch>
                            </div>
                        </div>
                        <div v-show="cur == 5" class="two-main-list">
                            <div class="two-main-item">
                                <h2>偏好设置</h2>
                                <div>图片水印/瓦力保镖私信保护/快捷键</div>
                            </div>
                            <div class="two-main-item">
                                <h3>图片水印</h3>
                                <div>
                                    在我上传的图片上显示水印
                                    <el-button type="text" class="but-two" @click="handlemake">编辑</el-button>
                                </div>
                                <!--                                密码的编辑按钮-->
                                <el-dialog style="width: 800px;margin-left: 23%;" class="title" :visible.sync="dialogFormVisible">
                                    <div>
                                        <h2>身份验证</h2>
                                        <h1>为了保护你的帐号安全，请验证身份，</h1>
                                        <h1>验证成功后进行下一步操作</h1>
                                    </div>
                                    <el-input
                                            placeholder="使用手机 +86 110进行验证"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <el-input
                                            placeholder="输入6位短信验证码"
                                            v-model="fake"
                                    >
                                    </el-input>
                                    <div>
                                        接收语音验证码
                                    </div>
                                    <h3>
                                        需要帮助？
                                    </h3>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div class="two-main-item">
                                <h2>瓦力保镖私信保护</h2>
                                <div>
                                    开启后，系统会对你收到的私信进行检测，被识别为「不友善」的私信将会被自动隐藏，
                                </div>
                                <div>
                                    严重者将会主动帮你拉黑对方，以减少收到「不友善」私信的打扰。
                                </div>
                                <el-switch
                                        class="anniu"
                                        v-model="value1"
                                >
                                </el-switch>
                            </div>
                            <div class="two-main-item">
                                <h2>快捷键</h2>
                                <div>
                                    更加方便地浏览知乎，按 ?（Shift + /）查看所有快捷键
                                </div>
                                <el-switch
                                        class="anniu"
                                        v-model="value1"
                                >
                                </el-switch>
                            </div>

                        </div>
                        <div v-show="cur == 6" class="two-main-list">
                            <div class="two-main-item">
                                <h2>6</h2>
                                <div>账号设置/个性域名</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
<!--            第三部分-->
            <el-col :span="3">
                <div class="bg-both-three">
                    <div class="three-main">
                        <h3>常见问题</h3>
                        <div class="three-main-list">
                            <h4>账号与密码</h4>
                            <div class="three-main-item">
                                  <h1>1.为什么要进行二次验证？</h1>
                                  <h1>2.二次验证的手机/邮箱不可用？</h1>
                                  <h1>3.忘记密码怎么办？</h1>
                                  <h1>4.手机丢失，手机号不可用怎么办？</h1>
                                  <h1>5.我要绑定的手机号提示我已经注册了，怎么办？</h1>
                                  <h4 style="color: #121212">其他问题</h4>
                                  <h1>6.网站出现了问题？问题反馈</h1>
                            </div>

                        </div>
                    </div>
            </div>
            </el-col>
        </el-row>






    </div>
</template>

<script>
    import PublicHader from "./components/PublicHader";
    export default {
        name: "Seting",
        data(){
            return{
                dialogFormVisible:false,
                dialogFormVisible1:false,
                input: '',
                fake:'',
                radio:'1',
                cur: 1,
                categoryIndex: 1, //点击当前背景变成白色索引
                value1: true,
            }
        },
        methods:{
            handlemake(){
                this.dialogFormVisible = true
            },
            clickCategory(index) {
                // 这里我们传入一个当前值
                this.categoryIndex = index;
            },
            handlemake1(){
                this.dialogFormVisible1 = true
            }
        },
        components:{
            PublicHader,
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .Seting-all{
        height: 800px;
        width: 100%;
        background: rgb(246,246,246);
    }
    /*第一部分代码*/
    .grid-content-one {
        margin-top: 60px;
        margin-left: 250px;
        border-radius: 4px;
        min-height: 36px;
        background: white;
        /*border: 1px solid red;*/
    }
    .one-main{
        height: 700px;
        width: 100%;
        box-sizing: border-box;
    }
    .one-main-list{
        display: flex;
        flex-direction: column;
        height: 300px;
        width: 100%;
        /*border: 1px solid red;*/
    }
    .one-main-item{
        flex: 1;
        padding-top: 13px;
        padding-left: 30px;
        font-size: 15px;
        color: rgb(133,144,186);
        /*border: 1px solid red;*/
    }
    .one-main-item i{
        margin-left: -5px;
        margin-right: 5px;
    }
    .one-main-item:hover{
        color: #444444;
        font-weight: bold;
        background: rgb(245,246,248);
    }
    /*第二部分*/
    .bg-purple-two {
        margin-top: 60px;
        margin-right: 30px;
        background: white;
        border-radius: 4px;
        min-height: 36px;
        /*border: 1px solid red;*/
    }
    .two-main{
        height: 700px;
        width: 100%;
        box-sizing: border-box;
    }
    .two-main-list{
        display: flex;
        flex-direction: column;
        height: 600px;
        width: 100%;
        /*border: 1px solid red;*/
        box-sizing: border-box;
    }
    .two-main-item{
        flex: 1;
        /*border-left: 1px solid #d3d3d3;*/
        padding: 20px 18px;
        border: 1px solid rgb(235,235,235);
    }






    .two-main-item h3{
        font-size: 15px;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .two-main-item h2{
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 19px;
        color: #121212;
    }
    .two-main-item h1{
        margin-bottom: 10px;
        font-size: 15px;
    }
    .two-main-item div{
        line-height: 20px;
        color: #8590A6;
        font-size: 14px;
    }
/*    第二部分的几个按钮的代码*/
    .but{
        margin-left: 80%;
    }
    .but-one{
        margin-left: 78%;
    }
    .but-two{
        margin-left: 89%;
    }
    .title{
        text-align: center;
    }
    .title div:nth-last-child(2){
        text-align: right;
        margin-top: 20px;
    }
    .title h2{
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: inherit;
        /*color: #121212;*/
    }
    .title h3{
        text-align: right;
        margin-top: 20px;
        font-size: 14px;
        color: #8590a6;
    }
    .title h1:last-of-type{
        margin-bottom: 30px;
    }
    .anniu{
        display: inline-block;
        margin-top: -30px;
        margin-left: 90%;
    }
/*    第三部分*/
    .bg-both-three {
        margin-top: 60px;
        margin-left: -20px;
        background: white;
        border-radius: 4px;
        min-height: 36px;
        /*border: 1px solid red;*/
    }
    .three-main{
        position: fixed;
        height: 350px;
        width: 250px;
        background: white;
        padding: 20px 0;
        /*border: 1px solid red;*/
    }
    .three-main h3{
        padding: 0 0 0 20px;
        font-size: 19px;
        font-weight: bold;
    }
    .three-main-list{
        height: 350px;
        width: 250px;
        padding: 10px 0;
        box-sizing: content-box;
        /*border: 1px solid red;*/
    }
    .three-main-list h4{
        margin: 10px 0;
        padding: 0 0 0 20px;
        font-weight: bold;
        font-size: 14px;
    }
    .three-main-item{
        display: flex;
        color: rgb(133,144,166);
        flex-direction: column;
    }
    .three-main-item h1{
        font-size: 14px;
        padding: 10px 20px;
    }
    .three-main-item h1:hover{
        color: rgb(0,132,255);
    }

</style>